import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {Row, Tabs} from 'antd'
import {Page} from 'components'
import {ChartCard} from 'components/Charts'
import Detail from "./components/Detail"
import {routerRedux} from 'dva/router'
import ChatroomMemberList from '../../chatroomMember/components/List'
import ChatroomChatRecordsList from './components/ChatroomChatRecordsList'
import queryString from "query-string"

const {TabPane} = Tabs
const Operator = ({
                    chatroomDetail,
                    chatroomMember,
                    loading,
                    dispatch,
                  }) => {
  const {data, disabled, chatRoomChatRecordsList, chatRoomChatRecordsListPagination} = chatroomDetail
  const {list: chatroomMemberList, pagination: chatroomMemberPage} = chatroomMember
  const {query, pathname} = location
  const detailProps = {
    data,
    disabled,
    location,
  }

  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery,
      }),
    }))
  }

  const chatroomMemberListProps = {
    rowKey: 'id',
    dataSource: chatroomMemberList,
    loading: loading.effects['chatroomMember/query'],
    pagination: chatroomMemberPage,
    location,
    dispatch,
    onChange (page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize,
      })
    },
    openTab (record) {
      const tab = {
        name: '群成员-'.concat(record.inChatroomName || record.memberNickname || record.chatroomMemberWxId),
        route: '/customer/'.concat(record.id),
      }
      dispatch({
        type: 'app/addTab',
        payload: {
          menu: tab,
        },
      })
    },
  }

  const chatRoomChatRecordsListProps = {
    rowKey: 'id',
    dataSource: chatRoomChatRecordsList,
    loading: loading.effects['chatroomMember/queryChatroomChatRecords'],
    pagination: chatRoomChatRecordsListPagination,
    location,
    dispatch,
    onChange (page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize,
      })
    },
  }

  const handleTabsChange = (activeKey) => {
    if (activeKey === 'chat_record') {
      dispatch({
        type: 'chatroomDetail/queryChatroomChatRecords',
        payload: {
          current: 1,
          size: 10,
          chatroomId: data.chatroomId,
        },
      })
    } else {
      dispatch({
        type: 'chatroomMember/query',
        payload: {
          current: 1,
          size: 10,
          chatroomId: data.id,
        },
      })
    }
  }

  return (
    <div>
      <Row gutter={24}>
        <ChartCard style={{marginBottom: 12}}>
          <Detail {...detailProps} />
        </ChartCard>
      </Row>
      <Row gutter={24}>
        <Page inner>
          <Tabs onChange={handleTabsChange}>
            <TabPane tab={'群好友明细'} key={'friend_detail'}>
              <ChatroomMemberList {...chatroomMemberListProps} />
            </TabPane>
            <TabPane tab={'群聊天记录'} key={'chat_record'}>
              <ChatroomChatRecordsList {...chatRoomChatRecordsListProps} />
            </TabPane>
          </Tabs>
        </Page>
      </Row>
    </div>
  )
}

Operator.propTypes = {
  chatroomDetail: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({chatroomDetail, chatroomMember, loading}) => ({
  chatroomDetail,
  chatroomMember,
  loading,
}))(Operator)
